<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>curvyCorners 2.0 - How to use it</title>
<meta name="author" content="Cameron Cooke / CPKS"/>
<meta name="description" content="How to use curvyCorners in your HTML pages"/>
<style type="text/css">
/*<![CDATA[*/
.cameronOnly {
  display:none;
}
code, samp {
  font-size:small;
}
samp:before {
  content: "> ";
}
.codeSample {
  background-color: #ffffe0;
  border:solid #C2C2C2 1px;
  padding:10px;
  font-family: "Courier New", Courier, monospace;
  font-size: small;
  margin:25px 0 5px 0;
}
.codeSample ins, p.explain ins {
  color:#0A0;
  text-decoration:underline;
}
.codeSample del, p.explain del {
  color:#E00;
  text-decoration:strikethrough;
}

/*]]>*/
</style>
</head>
<body>

<h1>Instructions</h1>

<h2>Navigation</h2>

<ul class="anchorNav">
  <li><a href="#source">Getting the source</a></li>
  <li><a href="#newWay">Using CurvyCorners the new way &mdash; using CSS</a></li>
  <li><a href="#manually">Using CurvyCorners manually</a></li>
  <li><a href="#upgrading">Upgrading from version 1.x</a></li>
  <li><a href="#options">CurvyCorners options and settings</a></li>
  <li><a href="#further">Further information</a></li>
  <li><a href="#translations">Other translations</a></li>
</ul>

<h2 id="source">Getting the source</h2>
<dl><dt>To check out the latest stable version:</dt>
<dd><samp>svn co http://curvycorners.googlecode.com/svn/tags/2.0.x/stable [mydir]</samp></dd>
<dt>To check out the latest (bleeding-edge) revision:</dt>
<dd><samp>svn co http://curvycorners.googlecode.com/svn/trunk [mydir]</samp></dd>
<dt>To browse the versions:</dt>
<dd><a href="http://code.google.com/p/curvycorners/source/browse/#svn/tags">http://code.google.com/p/curvycorners/source/browse/#svn/tags</a></dd>
<dt>To browse the latest revision:</dt>
<dd><a href="http://code.google.com/p/curvycorners/source/browse/#svn/trunk">http://code.google.com/p/curvycorners/source/browse/#svn/trunk</a></dd>
</dl>

<p>You can also download the latest stable version of CurvyCorners from the
<a href="http://www.curvycorners.net/downloads/">downloads section</a>.</p>

<p>Some earlier versions are also available from the
<a href="http://code.google.com/p/curvycorners/downloads/list">Google Code
Downloads page</a>.</p>

<h2 id="newWay">Using CurvyCorners the new way &mdash; using CSS</h2>
<p>As from 2.0.x, CurvyCorners allows you to put rounded corners on your
page elements using <abbr title="Cascading Style Sheets">CSS</abbr>. At
present, there are two proprietary CSS syntaxes, one for Mozilla/Firefox
and one for Safari and the older WebKit browsers. Opera 10.5 and Chrome
now support the <a
href="http://www.w3.org/TR/2009/CR-css3-background-20091217/#the-border-radius">standard CSS3 syntax</a>.</p>

<p>All you need to do is to put the appropriate rounded corner styles
into the appropriate rules, and CurvyCorners will automatically draw corners
for the affected boxes, whilst leaving it to the newer browsers to draw them
using their native methods.</p>

<h3>Example</h3>

<p>Suppose that you have a DIV in your page with class <var>rounded</var>. You
want all four corners rounded, with a radius of 3 ex.
The following CSS will accomplish this:</p>

<div class="codeSample">
.rounded {<br/>
&nbsp;&nbsp;border-radius:3ex;<br/>
&nbsp;&nbsp;-webkit-border-radius:3ex;<br/>
&nbsp;&nbsp;-moz-border-radius:3ex;<br/>
}
</div>

<p>If you want (say) only the top left and bottom right corners rounded,
then you can do it like this:</p>

<div class="codeSample">
.rounded {<br/>
&nbsp;&nbsp;border-radius:3ex 0;<br/>
&nbsp;&nbsp;-moz-border-radius:3ex 0;<br/>
&nbsp;&nbsp;-webkit-border-top-left-radius:3ex;<br/>
&nbsp;&nbsp;-webkit-border-bottom-right-radius:3ex;<br/>
}
</div>

<p>(Note that the CSS3 syntax, listed first, is similar to the WebKit version, but
of course without the "-webkit-" prefix.
On start-up, curvyCorners looks for the
Mozilla syntax and ignores the Webkit version.
This is because support for the CSS3 syntax (in Chrome and Opera 10.5) is
only recent, the "-webkit-" syntax is laborious and obsolescent,
and the Mozilla syntax is likely to be needed for some time yet.
<strong>In a later version, curvyCorners will look for the <a
href="http://www.w3.org/TR/2009/CR-css3-background-20091217/#the-border-radius">CSS3
standard syntax</a>.</strong>)</p>

<h3 id="cssLimits">CSS Selector Limitations</h3>

<p>Because of the need for the mechanism to operate across all browsers,
the CSS selector syntax supported is necessarily limited. This sets out
what is supported:</p>

<ul><li>a selector-list, where a selector-list is <em>either</em> a
selector <em>or</em> a selector followed by a comma and an optional space,
followed by a selector-list.</li>
<li>A selector is <em>either</em> a simple-selector <em>or</em> a
simple-selector followed by a space followed by a selector.</li>
<li>A simple-selector is <em>either</em> an ID of the form
<code>#myID</code>, <em>or</em> a tag-class-selector.</li>
<li>A tag-class-selector may be any one of:
 <ol><li>a tag name (e.g. <code>div</code>);</li>
  <li>a class name preceded by a dot (e.g. <code>.myClass</code>); <em>or</em></li>
  <li>a tag name followed by a dot followed by a class name (e.g. <code>div.myClass</code>).</li>
 </ol>
</li>
</ul>

<p>The following are examples of supported selectors:</p>

<ul><li>.myclass</li>
<li>#mydiv frameset.myclass .rounded</li>
<li>form.rounded frameset,div.rounded</li>
</ul>

<p><strong>Warning:</strong> because CurvyCorners appends extra DIVs to the
boxes you wish to round, the following selector will reliably <em>not</em> work:</p>

<p><code>#myBox div</code></p>

<p>This is because the style will be applied not just to the top-level DIVs
within the element whose ID is <code>myBox</code>, but also to the DIVs inserted
by CurvyCorners.</p>

<p>The following unsupported selectors may not work as expected:</p>
<ul><li>div #mybox</li><li>div.rounded #mybox</li></ul>

<p>Because an ID identifies a page element uniquely, qualifying it with an
enclosing scope may cause the selector to fail (e.g. if <var>#mybox</var> is
a top-level DIV, or if it is not located within a DIV of class <var>rounded</var>).
However, CurvyCorners assumes that the element is to be referenced anyway and
will apply the appropriate rounding styles. To put it another way,
if there is an ID of the form <var>#id</var> anywhere in a selector,
then CurvyCorners ignores everything to the left.</p>

<p>CurvyCorners does not support sibling ('+'), child ('&gt;') or
attribute ([]) selectors.</p>

<h3 id="dyn">Dynamic HTML</h3>
<p>CurvyCorners now has limited support for dynamic HTML. In particular, you
may change the contents of a box and have the box re-sized (re-drawn) to fit.
However, because of the technique CurvyCorners uses to draw the corners, this
cannot happen automatically. Instead, you must do the following:</p>

<ol>
<li>Specify the corners using the
<a href="#newway">new CSS style</a> and <em>not</em> the old
onload-function style;</li>
<li>Give the box elements to be re-drawn the (additional) special class-name
<code>curvyRedraw</code>; and</li>
<li>in your JavaScript, explicitly call the function
<code>curvyCorners.redraw()</code>.</li>
</ol>

<p><code>curvyCorners.redraw()</code> takes no parameters and returns no
usable value.</p>

<p>If you need to change some attributes or styling of the redrawable elements,
this should not be done directly through the
<acronym title="Document Object Model">DOM</acronym>.
Instead, having identified the
DOM object (e.g. with <code>document.getElementById()</code>), call</p>
<p><code>curvyCorners.adjust(DOMObj, propertyName, newValue);</code></p>
<p>where:</p>
<dl>
<dt><var>DOMObj</var></dt>
<dd>is the element object with className <code>curvyRedraw</code> that needs to be changed;</dd>
<dt><var>propertyName</var></dt>
<dd>is the name of the property without a leading dot;
if it is a style property, it should be
expressed as <code>'style.property'</code>.</dd>
<dt><var>newValue</var></dt>
<dd>is the new value, e.g. <code>'none'</code>.</dd>
</dl>

<p><code>curvyCorners.adjust()</code> must take all three parameters described
above. It returns no useful value.</p>

<p>An extensive example of this technique is contained in
<a href="http://www.curvycorners.net/includes/examples/demo5.html">demo
5</a>.</p>

<p>To change the child elements of a resizable cornered box, you should
not attempt to do this by using the <var>innerHTML</var> "property" of
the rounded box itself (not even using <code>curvyCorners.adjust()</code>).
Instead, nest an inner div inside the cornered box, and apply the changes
directly to that inner div before calling <code>curvyCorners.adjust()</code>.
For example:</p>

<p class="codeSample">
&lt;div class="curvy curvyRedraw"&gt;&lt;-- the rounded DIV --&gt;<br/>
&nbsp;&lt;div id="nested1"&gt;&lt;!-- the nested DIV --&gt;<br/>
&nbsp;&nbsp;&nbsp;&lt;p&gt;Initial contents here&lt;/p&gt;<br/>
&nbsp;&lt;/div&gt;<br/>
&lt;/div&gt;<br/><br/>

&lt;script type="text/javascript"&gt;&lt;[CDATA[<br/>
// ...<br/>
// new box contents in HTML string <var>str</var><br/>
document.getElementById('nested1').innerHTML = str;<br/>
curvyCorners.redraw();<br/>
// ...<br/>
//]]&gt;&lt;/script&gt;<br/>
</p>

<p>(Of course, it is likely to be more efficient to
use the DOM to add or change child elements, but the above
illustration uses innerHTML for the sake of simplicity.)</p>

<h4>Handling window resize events</h4>
<p>curvyCorners supports redrawing curved boxes in response to a change
in the browser window size. If you wish to take advantage of this,
you can add an event handler to trigger a redraw. However, some
DOM changes will fire spurious window resize events in some browsers.
These can happen in the midst of DOM changes (including those that
curvyCorners itself makes whilst redrawing). Therefore, do <strong>not</strong>
make your handler call <code>curvyCorners.redraw()</code> directly.
Instead, set your resize handler function to call
<code>curvyCorners.handleWinResize()</code>.</p>

<p>Next, if you find that some of your code is triggering window resize
events (which will cause a noticeable delay!), surround the code with:</p>

<p class="codeSample">
curvyCorners.setWinResize(false); // block redraw on resize<br/>
// ... your DOM-manipulating code here<br/>
curvyCorners.setWinResize(true); // re-enable redraws on window resize
</p>

<p>An example of this technique is contained in
<a href="http://www.curvycorners.net/includes/examples/demo5.html">demo
5</a>.</p>

<h4 id="delay">Delaying the CurvyCorners startup code</h4>

<p>If it is planned to add a number of elements to the page after it has
loaded, and if these elements are to have rounded corners, it can be
advantageous to delay the running of the startup code. This can be done as
follows:</p>

<ol><li><em>Before</em> the script tag that includes curvycorners.js, add the
following in the &lt;head&gt; section of your page:
<p class="codeSample">
&lt;script type="text/javascript"&gt;<br/>
var curvyCornersNoAutoScan = true;<br/>
&lt;/script&gt;
</p></li>
<li>After your script to add the elements has run, invoke the startup code
with the following statement:
<p class="codeSample">
curvyCorners.init();
</p></li>
</ol>

<p>If you specify in CSS the ID of an element with rounded corners that is
not yet added to the page, CurvyCorners will warn of the problem by using
alert(). See below under <a href="#options">options and settings</a> for
how to suppress this message.</p>

<p class="codeSample">
&lt;script type="text/javascript"&gt;<br/>
var curvyCornersVerbose = false;<br/>
&lt;/script&gt;
</p>

<h4>Using ASP.net</h4>

<p>If you use ASP.Net Validator Controls with the Display Property set to Dynamic 
within a rounded box, client-side error messages within an element using 
curvycorners will not display correctly, as the containing element needs to be 
redrawn to accommodate the message. It is necessary to hook the client side 
validation by overloading the validation to callcurvyCorners.Redraw whenever client 
side error messages are shown by these controls. This can be done by including 
something like the following after the validator markup (e.g. at the end of the aspx 
file):</p>

<p class="codeSample">
&lt;script type="text/javascript"&gt;<br/>
ValidatorUpdateIsValid = function() {<br/>
&nbsp;&nbsp;if (!AllValidatorsValid(Page_Validators)) curvyCorners.redraw();<br/>
}<br/>
&lt;/script&gt;
</p>

<p>Similar action should be taken where an ASP.Net UpdatePanel resides within a box 
rounded by curvyCorners, to ensure that the element (and thus the corners) are 
redrawn after the partial postback.</p>

<h3>Hidden Boxes</h3>
<p>CurvyCorners supports the styling of boxes that are not currently
displayed, i.e. which have the style <code>display:none</code>. In such cases,
it may be necessary for CurvyCorners temporarily to display the box, and
this may cause a brief flicker as the page is loaded.</p>

<h3>Forcing curvyCorners to ignore some elements</h3>

<p>Instead of targeting your styles more precisely, it may be
convenient to force curvyCorners to skip certain elements in the page.
This can be done by giving them the special <code>curvyIgnore</code>
class. Once curvyCorners has added rounded corners to a box,
it automatically adds the <code>curvyIgnore</code> class to that box.</p>

<h3>Other limitations</h3>

<ul>
<li>&lt;img&gt; elements cannot be rounded using curvyCorners.
Instead, use a &lt;div&gt; element and set the image as the
background-image of the &lt;div&gt;.</li>

<li>&lt;table&gt; elements and most inline elements (e.g. &lt;input&gt;)
can likewise not be rounded using curvyCorners. This is because curvyCorners
obtains works by appending DIV elements to the box. So if it isn't legal in
HTML to append a DIV to an element, we recommend against trying to round
that element with curvyCorners.</li>

<li>If you wish to invoke curvyCorners in a browser that supports rounded
corners natively, e.g. Opera &gt;= 10.5, Firefox, Chrome or Safari, you <em>must</em> use the
<a href="#manually">manual</a> method described below.</li>

<li>In some circumstances, a browser may not compute a display width for a
box that you wish to style with rounded corners. This may either be because
the box is not currently displayed, or because of a peculiarity in the
browser. In this circumstance, CurvyCorners will output an error message and
continue; but it will not be able to apply corners to the box in question.
It may be possible to correct this by applying a width or min-width style
to the affected box element.
If you cannot correct the problem in any other way, it is possible to
suppress the display of the error message: see <a href="#options">options</a>
below.</li>

<li>In Opera versions &lt;= v10.5, unrecognized styles (including rounded corner styles)
are not included in the DOM tree. CurvyCorners can detect them only if it has
access to the CSS text.
If the stylesheet
is included using a <code>&lt;link href="mystyle.css" rel="stylesheet"/&gt;</code>
element, or using an <code>@import</code> rule, old versions of Opera won't be able to access it.
It has access only if the style is included in the HTML page itself.
Also, old versions of Opera still parse -webkit- style declarations
(whereas IE now uses the -moz- declarations).
</li>

<li>Boxes styled by CurvyCorners cannot be resized dynamically except by
using the <a href="#dyn">technique described above</a>.</li>

<li id="borderlimits">If a box styled by CurvyCorners has borders,
then for best results, the border width must be the
same on both sides adjacent to a round corner.</li>

<li>When rounding a bordered box, the border style must always be
<code>solid</code>: other styles are not supported.</li>

<li>Elliptical radii (e.g. <code>border-radius:1em/2em;</code>) are not
supported. The first dimension will be understood as the only dimension.</li>

<li>In legacy browsers, when using image backgrounds, the lower part
of the box may be out by 1 pixel. We are investigating this issue,
which seems unpredictable and may be an artifact of certain ancient
rendering engines.</li>

<li>Again in legacy browsers, form elements enclosed in a rounded
box will lose the focus during curvyCorners startup. Therefore,
setting the focus in a <code>document.body.onload</code> function
will not work. Instead, it is necessary to delay curvyCorners
startup <a href="#delay">as described above</a>.</li>

<li>CurvyCorners cannot detect :hover events.</li>
</ul>

<h2 id="manually">Using CurvyCorners manually</h2>
<p>The following instructions will round the corners of a DIV element with a 20
pixel radius.</p>

<p>Once you have downloaded the file, copy it to your site.
Then copy the code below and paste it into the head section of your web page.
If you saved the file anywhere other than the root of the site, amend the src
location below.</p>

<div class="codeSample">
    &lt;script type="text/JavaScript" src="curvycorners.js"&gt;&lt;/script&gt;
</div>

<p>Next create a DIV element. If you already have a DIV whose corners you want
to round then all you need to do is give the DIV an ID.</p>

<div class="codeSample">
    &lt;DIV id="myDiv"&gt;&lt;/DIV&gt;
</div>

<p>CurvyCorners will automatically pick up style information from the DIV
element. So for example if you give the DIV a 2px black border in a stylesheet,
then the borders will be automatically added to the rounded corners.</p>

<p>Next we need to add some JavaScript to load when the web page loads. In the
HEAD section of your webpage add the following:</p>

<div class="codeSample">
  &lt;script type="text/JavaScript"&gt;
  <br />
  &nbsp;&nbsp;window.onload = function()&nbsp;{<br />
  &nbsp;&nbsp;&nbsp;&nbsp;var settings = {<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tl: { radius: 20 },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr: { radius: 20 },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bl: { radius: 20 },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;br: { radius: 20 },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;antiAlias: true<br />
  &nbsp;&nbsp;&nbsp;&nbsp;}<br />
  <br />
  &nbsp;&nbsp;&nbsp;&nbsp;var divObj = document.getElementById("myDiv");<br />
  &nbsp;&nbsp;&nbsp;&nbsp;curvyCorners(settings, divObj);<br />
  <br />
  &nbsp;&nbsp;&nbsp;&nbsp;// or, equivalently:<br />
  &nbsp;&nbsp;&nbsp;&nbsp;curvyCorners(settings, '#myDiv');<br />
  &nbsp;&nbsp;}<br />
  <br />
  &lt;/script&gt;
</div>

<p>That's it, run your script to give it a try.</p>

<h3>Breaking it down</h3>

<p>I don't have the time to write a full API so this part will try and go
into as much detail as possible.</p>

<h4>The Settings</h4>

<p>The first part of the previous example creates a variable called settings;
you can change this to any variable name you want. You will need to use this
variable later on in the script. This variable holds all the settings needed
for the curvyCorners object to work.</p>

<p>Each line of the settings object is a particular setting:
for example the first line <code>tl: { radius: 20 },</code> tells the script
that you want the top right corner of your box to have a 20 pixel corner radius.</p>

<p>The next three lines set the radii for the other three corners. So for
example if you wanted the corner radii to be 20, 40, 60 and 80 from top left to
bottom right, your settings object would look something like the example below.</p>

<div class="codeSample">
  &nbsp;&nbsp;&nbsp;&nbsp;var settings = {<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tl: { radius: <b>20</b> },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr: { radius: <b>40</b> },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bl: { radius: <b>60</b> },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;br: { radius: <b>80</b> },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;antiAlias: true<br />
  &nbsp;&nbsp;&nbsp;&nbsp;}
</div>

<p>(Note that if you are using borders or a background image,
you should be mindful of the
<a href="#borderlimits">limitations documented above</a>.)</p>

<p>What about square corners? Say you did not want the top right and bottom left
corners to be rounded at all and remain square: in this case, either specify
a zero radius, or omit the corner specification entirely.
See example below.</p>

<div class="codeSample">
  &nbsp;&nbsp;&nbsp;&nbsp;var settings = {<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tl: { radius: <b>20</b> },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr: { radius: <b> 0</b> },<br />
  &nbsp;&nbsp;&nbsp;// bl: { radius: <b> 0</b> },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;br: { radius: <b>80</b> },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;antiAlias: true<br />
  &nbsp;&nbsp;&nbsp;&nbsp;}
</div>

<h5>Anti-Aliasing?</h5>
<p>Changing the value of <var>antiAlias</var> from <code>true</code> to
<code>false</code> will toggle the anti-aliasing. Turning off anti-aliasing will
reduce the smoothness of the corners but will greatly reduce the rendering time
required to draw the corners.</p>

<h4>Specifying which boxes to round</h4>

<p>The are two different ways of specifying which DIVs (or other HTML boxes)
you want the script to
round. The first method is to pass one or more objects when creating a new
instance of the curvyCorners object.</p>

<h5>Using DOM objects</h5>

<div class="codeSample">
  &nbsp;&nbsp;&nbsp;&nbsp;var divObj = document.getElementById("myDiv");
  <br /><br />
  &nbsp;&nbsp;&nbsp;&nbsp;curvyCorners(settings, divObj);<br />
</div>

<p>Let's break the code above down. The first line uses the
<acronym title="Document Object Model">DOM</acronym>'s
<code>document.getElementById()</code> method to return an object reference to
<var>myDiv</var> called <var>divObj</var>. Change <var>myDiv</var> to
the ID of the DIV element that you want to round.</p>

<p>The next line calls the curvyCorners function. The first param is the
settings object we created earlier. The second param must be an object reference
to the DIV you want to round. We retrieved this on the first line of the above
code sample.</p>

<p><strong>Note:</strong> You can pass more than one object when calling the
curvyCorners function. To supply additional objects just follow the API info
below. Each additional object passed will have the same corner settings applied,
as supplied in the first parameter. If you need additional DIVs rounded with
different settings, then you will need to call the curvyCorners function once
for each different setting, followed by the objects to which you wish to apply
those settings.</p>

<div class="codeSample">
  curvyCorners(settingsObj, DOMObj1[, DOMObj2[, DOMObj3[, . . . [, DOMObjN]]]]);
</div>

<h5>Using CSS Selectors</h5>

<p>The other way to specify which boxes you want to apply rounded corners to,
is to supply a CSS selector string as the second parameter insted of the DOM
object as described above. Any block elements that have that class applied will
have their corners rounded. See example below.</p>

<div class="codeSample">
  curvyCorners(settings, ".myClassName");
  <br /><br />
  ...
  <br /><br />

  &lt;div id="myDiv" class="myClassName"&gt;<br />
  &lt;/div&gt;
</div>

<p>(<strong>Note</strong> that unlike older versions of CurvyCorners, from
version 2.0.x you <em>must</em> put a dot in front of the class name.)</p>

<p>Instead of a simple class name, you can use a tag name qualified by a
class name, e.g. <code>div.myClassName</code> &mdash; this will affect DIV
elements but not other elements with <var>myClassName</var> as their class.</p>

<p>You can also use an ID prefixed with a hash, like this: <code>#myDiv</code></p>

<p>Finally, you can restrict the range of elements by separating two simple
selectors with a space, e.g. <code>#myDiv div.rounded</code>. This will apply
rounded corners only to those DIVs with class name <var>rounded</var> that
are contained <em>within</em> the DIV with ID <var>myDiv</var>.</p>

<p>For further details on <abbr>CSS</abbr> selectors, see
<a href="#cssLimits">CSS Selector Limitations</a> above.</p>

<h2 id="upgrading">Upgrading from version 1.x</h2>

<p>If you have pages that work with CurvyCorners v1.x, and would like to
upgrade them to work with v2.0.x, you have two routes: retain the explicit
style, or migrate to the CSS style.</p>

<h3>Upgrading using the explicit style</h3>

<p>The changes are these:</p>
<ol><li>If class names are passed to the curvyCorners() function, they
<em>must</em> be prefixed with a dot.</li>
<li>The <var>autoPad</var> member of the <var>settings</var> object is
no longer supported (it is always <code>true</code> in 2.x).</li>
<li>Corners that are to be rendered square should either be specified
with a zero radius, or omitted entirely. They should not be specified
as <code>false</code>.</li>
<li>The <code>applyCornersToAll()</code> function is now deprecated and will
be removed in a future release. It is no longer necessary to create a
curvyCorners object: simply call the curvyCorners function as before.</li>
</ol>

<p class="explain">The following example shows the changes you should make.
Things that you should delete are <del>shown like this</del>;
things you should insert are <ins>shown like this</ins>.</p>

<div class="codeSample">
  &lt;script type="text/JavaScript"&gt;
  <br /><br />
  &nbsp;&nbsp;window.onload = function()&nbsp;{<br />
  &nbsp;&nbsp;&nbsp;&nbsp;<ins>var</ins> settings = {<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tl: { radius: 20 },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tr: { radius: 20 },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<del>bl: false,</del><br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;br: { radius: 20 },<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;antiAlias: true<del>,<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoPad: false</del><br />
  &nbsp;&nbsp;&nbsp;&nbsp;}
  <br /><br />
  &nbsp;&nbsp;&nbsp;&nbsp;<del>var cornersObj = new </del>curvyCorners(settings, "<ins>.</ins>myClassName");<br />
  &nbsp;&nbsp;&nbsp;&nbsp;<del>cornersObj.applyCornersToAll();</del><br />
  &nbsp;&nbsp;}<br />
  <br />
  &lt;/script&gt;
</div>
<h3>Upgrading using the implicit style</h3>

<p>To use the new <abbr>CSS</abbr> style, first place appropriate CSS directives
in the &lt;style&gt; element of the &lt;head&gt; section of your page. To
replicate the example immediately above, do this:</p>

<div class="codeSample">
.myClassName {<br/>
&nbsp;&nbsp;border-radius:20px 20px 20px 0;<br/>
&nbsp;&nbsp;-moz-border-radius:20px 20px 20px 0;<br/>
&nbsp;&nbsp;-webkit-border-radius:20px;<br/>
&nbsp;&nbsp;-webkit-border-bottom-left-radius:0;<br/>
}
</div>

<p>Then, entirely delete the <code>window.onload</code> function (or that
part of it relating to CurvyCorners).</p>

<h2 id="options">CurvyCorners options and settings</h2>

<p>If CurvyCorners detects an error that prevents onward execution, it throws
an object of type Error.</p>

<p>If CurvyCorners detects an error that does not prevent onward execution, it
issues an alert. To suppress alerts in production pages, include the following
script in the &lt;head&gt; section of your page before the script tag that
includes the CurvyCorners script:</p>

<p class="codeSample">
&lt;script type="text/javascript"&gt;<br/>
var curvyCornersVerbose = false;<br/>
&lt;/script&gt;
</p>

<p>To delay or prevent execution of the CurvyCorners startup code, set
<var>curvyCornersNoAutoScan</var> <code>true</code> in the same way: see
<a href="#delay">the explanation above</a>.</p>

<h2 id="further">Further information</h2>

<p>If you need more information then just
<a href="http://code.google.com/p/curvycorners/source/checkout">checkout
the script's source</a>, it's well commented.</p>

<p>If you find a bug in CurvyCorners, please use the
<a href="http://code.google.com/p/curvycorners/issues/list">issue tracking system</a>
at <a href="http://code.google.com/p/curvycorners/">Google Code</a>. Please
check first that the bug has not already been fixed in the
<a href="http://code.google.com/p/curvycorners/source/browse/#svn/trunk">latest
version</a>. When
providing sample pages for us to investigate, please use the uncompressed version
of the script, curvycorners.src.js. (It is not possible to debug using the
script in its compressed form.)</p>

<p>If you have any questions, comments or ideas, then please use the
<a href="http://groups.google.com/group/curvycorners">forum</a><span class="cameronOnly">
by clicking the forum tab above</span>.</p>

<p>Have fun!</p>

<h2 id="further">Other translations</h2>

<p><a href="http://ucallweconn.net/be/CurvyCorners-be">Belorussian
translation</a> - Kindly translated by Jason Fragoso</p>

</body>
</html>